<template>
	<view class="wrap">
		<view class="main" v-if="refundData">
			<view class="box">
				<view class="b-row">
					<view class="b-tit">退款单号</view>
					<view class="b-cont f-text" @click="onCopy(refundData.refund_no)">{{refundData.refund_no}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款类型</view>
					<view class="b-cont f-text">{{refundData.type_text}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">订单余额支付</view>
					<view class="b-cont f-text">¥{{refundData.order_balance}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">申请退回余额</view>
					<view class="b-cont f-text">¥{{refundData.refund_balance}}</view>
				</view>
				<view class="b-row" v-if="refundData.status != 1">
					<view class="b-tit">实际退回余额</view>
					<view class="b-cont f-text">¥{{refundData.refund_balance_rel}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">订单现金支付</view>
					<view class="b-cont f-text">¥{{refundData.order_amount}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">申请退回现金</view>
					<view class="b-cont f-text">¥{{refundData.refund_amount}}</view>
				</view>
				<view class="b-row" v-if="refundData.status != 1">
					<view class="b-tit">实际退回现金</view>
					<view class="b-cont f-text">¥{{refundData.refund_amount_rel}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款原因</view>
					<view class="b-cont f-text">{{refundData.reason_text}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款留言</view>
					<view class="b-cont f-text">{{refundData.refund_note}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款状态：</view>
					<view class="b-cont f-text" :class="stateStyle(refundData.status)">
						{{refundData.status_text}}
					</view>
				</view>
				<template v-if="refundData.status != 1">
					<view class="b-row">
						<view class="b-tit">处理时间：</view>
						<view class="b-cont f-text">{{timeFormat(refundData.refund_time)}}</view>
					</view>
					<view class="b-row" v-if="refundData.status == 2">
						<view class="b-tit">现金退回方式：</view>
						<view class="b-cont f-text">{{refundData.refund_way_text}}</view>
					</view>
					<view class="b-row">
						<view class="b-tit">回复备注：</view>
						<view class="b-cont f-text">{{refundData.refund_note}}</view>
					</view>
					<view class="b-row" v-if="refundData.refund_photos.length > 0">
						<view class="b-tit">回复图片：</view>
						<view class="b-cont f-photos">
							<view class="s-item" v-for="(item, index) in refundData.refund_photos" :key="index">
								<image :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="btn-save" :class="{ disable: disable.submit }" @click="onCancel" v-if="refundData.status == 1">
				取消申请</view>
			<!-- <view class="btn-save" @click="onRetry" v-else-if="refundData.status == 4 || refundData.status == 6">重新提交 -->
			<!-- </view> -->
		</view>
		<view class="main" v-else-if="orderData">
			<view class="box">
				<view class="b-row">
					<view class="b-tit">订单金额</view>
					<view class="b-cont f-text">¥{{orderData.payment}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">订单余额支付</view>
					<view class="b-cont f-text">¥{{orderData.balance}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">申请退回余额</view>
					<view class="b-cont f-text">¥{{orderData.balance}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">订单现金支付</view>
					<view class="b-cont f-text">¥{{orderData.payment_rel}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">申请退回现金</view>
					<view class="b-cont f-text">¥{{orderData.payment_rel}}</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款类型</view>
					<view class="b-cont f-text" v-if="orderItemNo">部分商品</view>
					<view class="b-cont f-text" v-else>整个订单</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款原因</view>
					<view class="b-cont f-option">
						<picker @change="onFilter" data-field="reason" :value="reasonIndex" :range="reasonList"
							range-key="name">
							<view class="b-main">
								<view class="s-cont">{{this.reasonList[this.reasonIndex].name}}</view>
								<view class="iconfont icon-more"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">退款留言</view>
					<view class="b-cont f-textarea">
						<textarea placeholder="请填写详细内容" auto-height @input="onInputText"
							data-field="comment"></textarea>
					</view>
				</view>
			</view>
			<view class="btn-save" :class="{ disable: disable.submit }" @click="onApply">提交申请</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		refundInfo,
		applyRefund,
		refundCancel
	} from '@/service/api/order.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				orderNo: null,
				orderItemNo: null,
				orderData: null,
				refundNo: null,
				refundData: null,
				form: {
					reason: 'chat',
					comment: ''
				},
				disable: {
					submit: false
				},
				reasonList: [{
					value: 'chat',
					name: '沟通协商'
				}, {
					value: 'other',
					name: '其他'
				}],
				reasonIndex: 0,
				loadingType: 1,
				loadingText: '',
			}
		},
		onLoad(options) {
			this.orderNo = options.order_no
			this.orderItemNo = options.order_item_no
			this.loadOrderDetail()
		},
		computed: {
			stateStyle() {
				return (status) => {
					return {
						'f-wait': status === 1,
						'f-done': status === 2,
						'f-cancel': status === 3,
						'f-refuse': status === 4,
					}
				}
			}
		},
		methods: {
			loadOrderDetail() {
				getOrderDetail(this.orderNo).then(([err, res]) => {
					console.log('getOrderDetail', err, res)
					if (!err) {
						if (this.orderItemNo) {
							res.goods_list.filter((sItem, sIndex) => {
								if (sItem.order_item_no == this.orderItemNo) {
									this.orderData = sItem
									if (sItem.refund_no) {
										this.refundNo = sItem.refund_no
										this.loadRefundInfo()
									}
								}
							})
						} else {
							this.orderData = res
							if (res.refund_no) {
								this.refundNo = res.refund_no
								this.loadRefundInfo()
							}
						}
					}
				})
			},
			loadRefundInfo() {
				refundInfo(this.refundNo).then(([err, res]) => {
					console.log('refundInfo', err, res)
					if (!err) {
						this.refundData = res
					}
				})
			},
			// 输入内容
			onInputText(e) {
				console.log('onInputText', e)
				this.form[e.target.dataset.field] = e.detail.value;
			},
			onFilter(e) {
				console.log('onFilter', e.target.dataset.field, e.detail.value)
				const field = e.target.dataset.field
				if (field === 'reason') {
					this.reasonIndex = e.detail.value
					this.form.reason = this.reasonList[this.reasonIndex].value
				}
			},
			onApply() {
				if (this.disable.submit) {
					return;
				}
				this.disable.submit = true
				applyRefund(this.orderNo, this.orderItemNo, this.orderData.balance, this.orderData.payment_rel, this.form
					.reason, this.form
					.comment).then(([
					err, res
				]) => {
					console.log('applyRefund', err, res)
					this.disable.submit = false
					if (!err) {
						this.refundNo = res.refund_no
						this.loadRefundInfo()
						this.$logic.showToast('提交成功')
					}
				})
			},
			onCancel() {
				if (this.disable.submit) {
					return;
				}
				this.disable.submit = true
				refundCancel(this.refundNo).then(([err, res]) => {
					console.log('applyRefund', err, res)
					this.disable.submit = false
					if (!err) {
						this.refundData = null
						this.loadOrderDetail()
						this.$logic.showToast('取消成功')
					}
				})
			},
			onRetry() {
				this.refundNo = null
				this.refundData = null
			},
			onPreview(index) {
				let photos = []
				for (let i = 0; i < this.refundData.refund_photos.length; i++) {
					photos.push(this.refundData.refund_photos[i].url)
				}
				uni.previewImage({
					current: index,
					urls: photos
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding: 0 20upx;
	}

	.box {
		margin-top: 30upx;
		background: #fff;
		border-radius: 20upx;

		.b-row {
			padding: 30upx;
			display: flex;
			justify-content: space-between;

			.b-tit {
				font-size: 28upx;
				width: 240upx;
				color: $pq-main-color;
			}

			.b-cont {
				// flex: 1;
				display: flex;
				align-items: center;

				input {
					text-align: right;
				}

				textarea {
					text-align: right;
				}

				&.f-option {

					.b-main {
						display: flex;
						align-items: center;

						.s-cont {
							font-size: 28upx;
						}

						.iconfont {
							margin-left: 10upx;
						}
					}
				}

				&.f-input {
					input {
						width: 400upx;
					}
				}

				&.f-textarea {
					textarea {
						width: 400upx;
						font-size: 28upx;
					}
				}

				&.f-text {
					font-size: 28upx;
					color: #666;

					&.f-wait {
						color: $pq-active-color;
					}

					&.f-done {
						color: #59CC20;
					}

					&.f-refuse {
						color: #FF1334;
					}
				}

				&.f-photos {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					.s-item {
						margin-bottom: 20upx;
						margin-right: 20upx;
						position: relative;
						width: 160upx;
						height: 120upx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						image {
							width: 160upx;
							height: 120upx;
						}
					}
				}
			}
		}


		input {
			font-size: 28upx;
		}

		.input-placeholder {
			font-size: 28upx;
		}
	}

	.btn-save {
		margin-top: 50upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: $pq-main-color;
		border-radius: 50upx;
		letter-spacing: 10upx;
	}
</style>